var width=$(".banner").width();
var i=-1;
var timer=0;
$(document).ready(function () {
    move();
    timer=setInterval("move()",3000);
    $(".banner ul li").hover(function(){
        clearInterval(timer);
    },function(){
        timer=setInterval("move()",3000);
    })
    $(".banner .button-next").click(function(){
      clearInterval(timer);
      move();
      timer=setInterval("move()",3000);
    });
    $(".banner .button-prev").click(function(){
      clearInterval(timer);
      i=i==0?1:i-2;
      move();
      timer=setInterval("move()",3000);
    });
    $(".pagination span").click(function(){
      clearInterval(timer);
      i=$(this).index();
      if(i==0)
      i=3;
      i--;
      move();
      timer=setInterval("move()",3000);
    });
})
function move(){
  i++;
  if(i>=3)
      i=0;
      $('.banner ul li').eq(i).fadeIn(100).siblings().fadeOut();
      $('.pagination span').removeClass('white');

    if(i==2){
      $('.pagination span.active').removeClass('active');
      $('.pagination span').addClass('white');

      $('.pagination span').eq(i).addClass('active');
    }else{
      $('.pagination span.active').removeClass('active');
      $('.pagination span').eq(i).addClass('active');
    }
}
